<template>
	<view class="card_2">
		<my-swiper-view class="swiper" title="我的订单" :tabTexts="tabs" @getNowTab="getNowTab">
			<view class="order-list" v-if="canshow">
				<scroll-view class="scroll" scroll-y="true" >
					<view class="item" v-for="(item,index) in nowOrders" :key="index" @click="clickItem(item)">
						<image :src="$urlPrefix+item.image"></image>
						<view class="text">
							<text>{{item.title}}</text>
						</view>
						<view class="bottom">{{tabs[nowSelectTab]}}
							<uni-icons size="14" type="arrowright" color="#a1a1a1"></uni-icons>
						</view>
					</view>
				</scroll-view>
			</view>
		</my-swiper-view>
	</view>
</template>

<script>
	export default {
		props:{
			posts:{
				type:Array
			}
		},
		data() {
			return {
				tabs: ["待付款","待发货", "待收货", "已完成"],
				allOrder:[],
				nowOrders:[],
				nowSelectTab:0,
				canshow:false
			};
		},
		methods:{
			clickItem(item){
				if(item.status == 0){
					uni.navigateTo({
						url:"/pages/payment/payment?id="+item.id
					})
				}else{
					uni.showToast({
						title:"已经付完款啦"
					})
				}
			},
			getNowTab(data){
				this.canshow = false
				this.nowSelectTab = data
				this.buildNowOrders()
			},
			async buildNowOrders(){
				this.nowOrders = []
				var index = 0
				for(var i in this.allOrder){
					if(this.allOrder[i].status == this.nowSelectTab){
						this.nowOrders[index] = this.allOrder[i]
						this.nowOrders[index++].status = this.allOrder[i].status
					}
				}
				for(var i in this.nowOrders){
					await this.$postRequst("goods/get",{id:this.nowOrders[i].goodsId}).then(res=>{
						this.nowOrders[i].image = res.data.data[0].mainImages[0]
						this.nowOrders[i].title = res.data.data[0].title
					})
				}
				this.canshow = true
			}
		},
		created() {
			var vue = this
			this.$request("order/getOne",{userId:uni.getStorageSync("user").id},function(res){
				vue.allOrder = res.data.data
				vue.buildNowOrders()
			})
		}
	}
</script>

<style lang="scss">
	.card_2 {
		//border: 2rpx solid red;
		border-radius: 30rpx;
		overflow: hidden;
		
		.swiper{
			.order-list{
				//border: 2rpx solid red;
				height: 100%;
				width: 100%;
				box-sizing: border-box;
				
				.scroll{
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 100%;
					position: relative;
					left: 12rpx;
					//border: 2rpx solid red;
					.item{
						//border: 2rpx solid red;
						height: 150rpx;
						width: 650rpx;
						display: flex;
						flex-direction: row;
						margin-bottom: 10rpx;
						box-shadow: 5rpx 5rpx 10rpx #ccc;
						//align-items: center;
						position: relative;
						image{
							width: 140rpx;
							height: 140rpx;
							position: absolute;
							left: 5rpx;
							top:5rpx;
							bottom: 5rpx;
						}
						.text{
							display: flex;
							flex-direction: column;
							position: absolute;
							top: 5rpx;
							left: 145rpx;
							text{
								
								width: 450rpx;
								-webkit-line-clamp:2;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
								overflow: hidden;
								display: -webkit-box;
								font-size: 28rpx;
								margin-left: 10rpx;
							}
						}
						.bottom{
							position: absolute;
							bottom: 5rpx;
							right: 5rpx;
							font-size: 28rpx;
							color:#a1a1a1;
						}
					}
				}

			}
		}
	}
</style>
